<template>
	<view class="box">
		<uNavbar title="挂售订单" bgColor="#E0DDDA"></uNavbar>
		<view class="main">
			<view class="main_item" v-for="item in fullist" :key="item.id">
				<view class="main_item_top">
					<view class="main_item_from">
						{{item.name}}({{item.status_desc}})
					
						
						
					</view>
					<view class="main_item_price">
						{{item.market_number}}
					</view>
				</view>
				<view class="main_item_bottom" style="margin-bottom: 20rpx;" >
					<!-- <view class="main_item_text">
						转换生态积分金额:{{item.integral}}
					</view> -->
							
				</view>
	
				<view class="main_item_bottom">
					<view class="main_item_text">
						到账金额：{{item.amount}}
					</view>
					<view class="main_item_time">
						{{item.create_time}}
					</view>
				</view>
				<view class="btn" v-if="item.status==0" @click="selid=item.id,tipShow=true" >
					取消
				</view>
			</view>
		</view>
		<u-popup :show="tipShow" mode="center" @close="tipShow = false" closeable bgColor="transparent">
			<view class="prompt flex_ZC">
				<text class="f36">提示</text>
				<text class="prompt_tit">您确定要取消吗</text>
				<view class="prompt_ntm" @click="canel()">
					<text>确认</text>
				</view>
				<view class="empty"></view>
			</view>
		</u-popup>
		<noDatas :xxxList="fullist" :status="status"></noDatas>
	</view>

</template>

<script>
	import {myList,cancel} from "../../api/index.js"
	export default {
		data() {
			return {
			fullist:[],
			page: 1,
			size: 10,
			status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
			tipShow:false,
			selid:""
			}
		},
		onLoad() {
			this.getlist()
		},
		methods: {
			canel(){
				cancel({
					id:this.selid,
			
					
				}).then(res=>{
					if(res.code==1){
						this.tipShow=false,
						this.page=1
						this.getlist()
					}
					uni.$u.toast(res.msg)
				})
			},
			getlist(){
				myList({
					page:this.page,
					mode:1
				}).then(res=>{
					if (res.code == 1) {
						let list = res.data.data;
						this.fullist = this.page == 1 ? list : this.fullist.concat(list);
						console.log(this.fullist);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			}
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.getlist()
			}
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 750rpx;
		height: 100vh;
		background: #E0DDDA;
	}
	.btn{
		width: 230rpx;
		height: 60rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 332rpx 332rpx 332rpx 332rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		text-align: center;
		line-height: 60rpx;
		font-weight: 400;
		font-size: 32rpx;
		color: #FFFFFF;
	}
	.prompt {
		width: 600rpx;
		min-height: 400rpx;
		background: #E0DDDA;
		margin: 0 auto;
		border-radius: 20rpx;
		color: #333;
		padding-top: 30rpx;
	}
	
	.prompt>text {
		margin-top: 40rpx;
	}
	
	.prompt_tit {
		margin: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.prompt_ntm {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		width: 414rpx;
		height: 72rpx;
		line-height: 72rpx;
		background: linear-gradient( 90deg, #AB8E68 0%, #D7BA93 100%);
		border-radius: 28rpx;
		margin-top: 80rpx;
		color: #ffffff;
	}
	.main {
		width: 750rpx;
		margin-top: 40rpx;
		.main_item {
			width: 690rpx;
			// height: 150rpx;
			padding-bottom: 20rpx;
			background: #f2f2f2;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin: 0 auto;
			margin-bottom: 30rpx;
			.main_item_top {
				display: flex;
				justify-content: space-between;

				.main_item_from {
					width: 470rpx;
					font-size: 28rpx;
					color: #333;
					margin: 24rpx;
					 white-space: nowrap;
					  overflow: hidden;
					  text-overflow: ellipsis;
				}

				.main_item_price {
					font-weight: 500;
					font-size: 36rpx;
					color: #A68A64;
					margin: 24rpx;
				}
			}
			.main_item_bottom{
				margin-top: 10rpx;
				display: flex;
				justify-content: space-between;
				.main_item_text{
					font-size: 24rpx;
					color: #A6A5AF;
					margin-left: 24rpx;
				}
				.main_item_time{
					font-weight: 400;
					font-size: 24rpx;
					color: #A6A5AF;
					margin-right: 24rpx;
				}
			}
		}
	}
</style>